<template>
	<el-drawer :title="dialogTitle" :visible.sync="visible" size="600px" append-to-body destroy-on-close custom-class="user_form_drawer">
		<el-form v-bind="formConfig" :model="formData" :rules="formRules" label-width="80px" v-loading="loading">
			<el-row :gutter="16">
				<div class="user_avatar">
					<sw-image-uploader v-model="formData.attachmentId" size="110" ratio="5:7" clip />
				</div>
				<el-col :span="19">
					<el-form-item label="登录账号" prop="account">
						<sw-custom-input
							type="account"
							:disabled="!addOrEdit"
							v-model="formData.account"
							placeholder="请输入登录账号，推荐使用邮箱或手机号注册账号"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="19">
					<el-form-item label="用户名称" prop="userName">
						<el-input v-model="formData.userName" placeholder="请输入用户名称"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="19">
					<el-form-item label="用户部门" prop="deptId">
						<sw-depart-select v-model="formData.deptId" placeholder="请选择用户院系" style="width: 100%" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="用户电话" prop="phone">
						<sw-custom-input type="number" v-model="formData.phone" maxLength="11" placeholder="请输入用户电话" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="用户学历" prop="education">
						<el-select v-model="formData.education" placeholder="请选择用户学历" style="width: 100%">
							<el-option v-for="(item, index) in dictData['TB_SYS_USER_EDUCATION']" :key="index" :label="item.deName" :value="item.deValue" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="用户性别" prop="sex">
						<el-radio-group v-model="formData.sex" v-removeAriaHidden:radio>
							<el-radio v-for="(item, index) in dictData['TB_SYS_USER_SEX']" :key="index" :label="item.deValue">{{ item.deName }}</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="用户等级" prop="level">
						<el-select v-model="formData.level" placeholder="请选择用户等级" style="width: 100%">
							<el-option v-for="(item, index) in dictData['TB_SYS_USER_LEVEL']" :key="index" :label="item.deName" :value="item.deValue" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="用户证件">
						<el-input placeholder="请输入证件号码" v-model="formData.idNumber" v-id-card="18">
							<el-select v-model="formData.idType" slot="prepend" placeholder="请选择" style="width: 90px">
								<el-option label="身份证" value="1"></el-option>
								<el-option label="其他" value="2"></el-option>
							</el-select>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="用户类型" prop="type">
						<el-radio-group v-model="formData.type">
							<el-radio v-for="(item, index) in dictData['TB_SYS_USER_TYPE']" :key="index" :label="item.deValue">{{ item.deName }}</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="用户角色" prop="roleIds">
						<el-select v-model="formData.roleIds" multiple placeholder="请选择用户角色">
							<el-option v-for="(item, index) in list" :key="index" :label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="用户职务" prop="duty">
						<el-input v-model="formData.duty" placeholder="请输入用户职务"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="用户职称" prop="jobTitle">
						<el-input v-model="formData.jobTitle" placeholder="请输入用户职称"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="用户衔级" prop="rank">
						<el-input v-model="formData.rank" placeholder="请输入用户衔级"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="校园卡" prop="schoolCard">
						<el-input v-model="formData.schoolCard" placeholder="请输入校园卡"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="是否审核">
						<el-switch v-model="isNeedAudit" />
					</el-form-item>
				</el-col>
				<el-col :span="18" v-if="isNeedAudit">
					<el-form-item label="审核流程值" prop="definitionCode" label-width="100px">
						<el-input v-model="formData.definitionCode" placeholder="请输入审核流程值"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<div class="user_form_button">
			<el-button size="medium" @click="visible = false">取消</el-button>
			<el-button size="medium" type="primary" :loading="btnLoading" @click="handleSubmitForm()">确定</el-button>
		</div>
	</el-drawer>
</template>

<script>
import formMixins from '@/mixins/formMixins';
import { mapGetters, mapActions } from 'vuex';
import { userDetail, addedUser, updateUser } from '@/api/system/tbSysUser';
export default {
	mixins: [formMixins],
	enums: ['TB_SYS_USER_LEVEL', 'TB_SYS_USER_EDUCATION'],
	props: {
		list: { type: Array, default: () => [] }
	},
	data() {
		return {
			formName: '用户',
			formRules: {
				account: [{ required: true, message: '请输入用户账号', trigger: 'blur' }],
				userName: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
				deptId: [{ required: true, message: '请选择用户院系', trigger: 'change' }]
			},
			defaultProps: {
				label: 'name',
				children: 'childList'
			},
			isNeedAudit: false
		};
	},
	computed: {
		...mapGetters(['departTree']),
		detailData() {
			return eval(userDetail);
		},
		callFunction() {
			return eval(this.addOrEdit ? addedUser : updateUser);
		}
	},
	methods: {
		...mapActions(['getConstByCode']),
		formatFormParams() {
			let data = { ...this.formData };
			let roleArr = data.menuRoleList || [];
			let roleIdArr = roleArr.map((item) => item.id);
			this.$set(this.formData, 'roleIds', roleIdArr);
			this.$delete(this.formData, 'menuRoleList');
		},
		async beforeSubmitForm() {
			if (this.addOrEdit) {
				let result = await this.getConstByCode('USER_PASSWORD');
				this.$set(this.formData, 'password', result.value);
			} else {
				this.$delete(this.formData, 'password');
			}
			console.log(this.formData);
		}
	}
};
</script>
<style lang="scss">
.user_form_drawer .el-drawer__body {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
</style>
<style lang="scss" scoped>
.el-form.dialog_form_wrapper {
	padding: 16px 16px 0;
	overflow: auto;
	.user_avatar {
		float: right;
		width: 110px;
		height: 154px;
		margin-right: 8px;
	}
}
.user_form_button {
	padding: 16px;
	flex-shrink: 0;
	text-align: right;
	border-top: 1px solid #dcdfe6;
}
</style>
